<template>
  <el-button type="primary" @click="add()" color="#f7cca8">添加病床</el-button>
  <font size="5" color="black" face="Hiragino Sans GB" align="bottom" >欢迎您使用查房功能</font>
    <el-table :data="tableDataFromDB" stripe style="width: 100%" height="500">
      <el-table-column prop="bedName" label="病房类型" width="150"/>
      <el-table-column prop="img" label="病床图片" sortable width="150">
        <!--插入图片链接的代码-->
        <template #default="row">
          <el-image :src="row.row.img" style="width: 70px; height: 70px" />
        </template>
      </el-table-column>

      <el-table-column label="是否使用" width="150">
        <template #default="row">
          <el-switch v-model="row.row.status" @click="zhuangtai(row)" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="是"
    inactive-text="否"/>
        </template>
      </el-table-column>
      <el-table-column label="病人信息">
      <el-table-column prop="bedNum" label="病人床号" width="150" />
       <el-table-column prop="patientId" label="病人ID" width="150" />
        <el-table-column prop="patientName" label="病人姓名" width="150" />
         <el-table-column prop="sex" label="性别" width="150" />
      <el-table-column fixed="right" label="操作" width="310">
        <template #default="row">
          <!-- 编辑按钮 -->
        <el-icon :size="30" @click="handleClick(row)" color="#a7cca8" :dark="isDark"><Setting/></el-icon>
          <!-- 删除确认框 -->
         <el-popconfirm title="您确定要删除该角色吗?" @confirm="del(row)">
           <template #reference>
             <el-icon :size="30" color="#5b99fcc9"><MilkTea /> </el-icon>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
     </el-table-column>
    </el-table>
  <!--添加病床的窗体-->
  <el-dialog v-model="dialogVisible1_add" title="请增加" width="30%">
    <el-form label-width="120px">
      <el-form-item label="病床ID:(不可见)">              
        <el-input v-model="info1.bedId" />
      </el-form-item>
       <el-form-item label="病床类型:">
        <el-input v-model="info1.bedName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1_add = false">取消</el-button>
        <el-button type="primary" @click="insert()" v-model="dialogVisible1_add"
          >确认</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible" color="#426aef" title="请编辑" width="30%">
    <el-form label-width="120px">
      <el-form-item label="病人ID:">
        <el-input v-model="info.patientId" />
      </el-form-item>
      <el-form-item label="病人姓名:">
        <el-input v-model="info.patientName" />
      </el-form-item>
       <el-form-item label="性别:">
        <el-input v-model="info.sex" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="edit()" v-model="dialogVisible">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { get } from '@/utils/request'
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisible1_add: false,
      info: {},
      info1:{},
      tableDataFromDB:[],
    }
  },

  //用于网页初始化，网页启动时会自动执行该函数mounted()
 //res:从该url地址返回的对象 真正的数据在res.data中，res.data是数组。
   mounted() {
    get('/getBeds').then((res) => {
      console.log(res)
      this.tableDataFromDB = res.data
    })
    },

 methods: { 
    handleClick(data) {
      this.info = data.row
      this.dialogVisible = !this.dialogVisible
    }, 
    
    add()
    { 
      this.dialogVisible1_add = !this.dialogVisible1_add
    },

    insert(){
      this.dialogVisible1_add = !this.dialogVisible1_add
      get('/addBeds', this.info1).then((res) => {
      console.log(res.data)
      ElMessage({
          message: '添加成功',
          type: 'success'
        })
        //refresh page
        window.location.reload()
       })      
    },

    edit() {
       this.dialogVisible = !this.dialogVisible
       console.log(this.info)
       get('/updateBeds', this.info).then((res) => {
       ElMessage({
          message: '修改成功',
          type: 'success'
                 })
        window.location.reload()
    }) 
    },
   del(shanchugongneng) {
      console.log(shanchugongneng)
    get('/deleteBeds',{bedId:shanchugongneng.row.bedId}).then((res) => {
       ElMessage({
        message: '删除成功！',
        type: 'success'
      })
      window.location.reload()
    })  
    },
     zhuangtai(row){
      console.log(row.bedId)
       get('/updatestatus', {
        bedId: row.row.bedId,
        status: row.row.status,
      })
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
    }
   }
 }
</script>


